<template>
  <div class="wrapper">
    <Title :type.sync="curRecord.type"></Title>
    <Buttons :notes.sync="curRecord.notes"></Buttons>
    <LabelList :type="curRecord.type" :tag.sync="curRecord.tag" class="labelList"></LabelList>
    <NumberPad :amount.sync="curRecord.amount" @submit="saveRecord" class="numberPad"></NumberPad>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import Title from '@/components/MakeRecord/Title.vue';
  import Buttons from '@/components/MakeRecord/Buttons.vue';
  import LabelList from '@/components/MakeRecord/LabelList.vue';
  import NumberPad from '@/components/MakeRecord/NumberPad.vue';

  @Component({
    components: { Title, Buttons, LabelList, NumberPad },
  })
  export default class MakeRecord extends Vue {
    beforeCreate() {
      this.$store.commit('initRecordList');
      this.$store.commit('initTagList');
      this.$store.commit('initCurRecord');
    }

    get recordList() {
      return this.$store.state.recordList;
    }

    curRecord = this.$store.state.cur_record;

    saveRecord() {
      this.$store.commit('createRecord');
      if(!this.$store.state.createRecordFail) this.$router.replace('/details')
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: white;
    color: #333333;

    > .labelList {
      flex-grow: 1;
    }

    > .numberPad {
      width: 100%;
      position: fixed;
      bottom: 0;
    }
  }
</style>

